@import "../global/global";

$ring-checkbox-size: 13px;

.ring-checkbox {
  line-height: normal;
  text-align: left;
  outline: none;
}

.ring-checkbox__input-wrapper {
  line-height: $ring-checkbox-size;
  font-size: $ring-checkbox-size;
  position: relative;
  vertical-align: middle;
}

.ring-checkbox_form-label {
  display: inline-block;
  margin-bottom: $ring-unit;
}

:root .ring-checkbox__input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: $ring-checkbox-size;
  height: $ring-checkbox-size;
  margin: 0;

  & + .ring-checkbox__icon {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 11px;

    border: 1px solid $ring-gray-color;
    border-radius: 2px;
    background: transparent;
    user-select: none;

    & .ring-checkbox__icon__image {
      position: absolute;
      top: -4px;
      left: -1px;
      width: $ring-checkbox-size;
      height: $ring-checkbox-size;
    }
  }

  &:not([disabled]) + .ring-checkbox__icon {
    color: $ring-text-color;
  }

  &[disabled] + .ring-checkbox__icon {
    color: $ring-dark-gray-color;
    opacity: 0.5;
  }

  &:checked:not([disabled]) + .ring-checkbox__icon {
    border: 1px solid $ring-pale-blue-color;
  }

  &:not(:checked) + .ring-checkbox__icon .ring-icon {
    display: none;
  }

  &:focus + .ring-checkbox__icon,
  &.ring-checkbox_focus + .ring-checkbox__icon,
  &:focus:checked + .ring-checkbox__icon,
  &.ring-checkbox_focus:checked + .ring-checkbox__icon {
    border: 1px solid $ring-blue-color;
  }

  &:hover:not([disabled]) + .ring-checkbox__icon,
  &:hover:not([disabled]):checked + .ring-checkbox__icon {
    border: 1px solid $ring-link-hover-color;
  }
}

.ring-checkbox__label {
  margin-left: $ring-unit;
  line-height: normal;
}
